<template>
  <div class="date-picker">
    <div v-if="title" class="toolbar__title">{{ title }}</div>
    <div class="date-picker_search">
      <form action="/">
        <Search
          v-model="keyword"
          @input="_onSearch"
          placeholder="请输入关键字"
        />
      </form>
    </div>
    <div class="date-picker_body">
      <div
        v-if="columns.length === 0 && !status.loading"
        class="flex justify-center items-center flex-col flex-1 h-full"
      >
        <VanImage
          :src="require('@/assets/icon/empty.png')"
          style="width: 32px; height: 32px"
        ></VanImage>
        <span class="mt-12px text">暂无更多数据</span>
      </div>
      <List
        v-model="status.loading"
        :finished="status.finished"
        finished-text=""
        :immediate-check="false"
        @load="_onLoad"
      >
        <RadioGroup v-model="value">
          <Cell
            v-for="(item, index) in columns"
            :key="index"
            :title="item[labelKey]"
            clickable
            @click="value = item[valueKey]"
          >
            <template #right-icon>
              <Radio :name="item[valueKey]">
                <template #icon="props">
                  <img
                    class="img-icon"
                    :src="props.checked ? activeIcon : inactiveIcon"
                  />
                </template>
              </Radio> </template
          ></Cell>
        </RadioGroup>
      </List>
    </div>
    <div class="date-picker_toolbar">
      <button type="button" @click="$emit('cancel')" class="toolbar__cancel">
        取消
      </button>
      <span class="toolbar__line"></span>
      <button type="button" @click="_confirm" class="toolbar__confirm">
        确定
      </button>
    </div>
  </div>
</template>

<script>
import {
  Search,
  List,
  Cell,
  RadioGroup,
  Radio,
  Toast,
  Image as VanImage,
} from "vant";
export default {
  props: {
    title: {
      type: String,
      default: "",
    },
    columns: {
      type: Array,
      default: () => [],
    },
    labelKey: {
      type: String,
      default: "text",
    },
    valueKey: {
      type: String,
      default: "key",
    },
  },
  components: {
    Search,
    List,
    Cell,
    RadioGroup,
    Radio,
    VanImage,
  },
  data() {
    return {
      keyword: null,
      value: null,
      pageSize: 0,
      status: {
        refreshing: false,
        loading: false,
        finished: false,
      },
      activeIcon: require("@/assets/workbench/work/icon_choice_active.png"),
      inactiveIcon: require("@/assets/workbench/work/icon_choices_default.png"),
    };
  },
  methods: {
    _confirm() {
      if (this.value === null) {
        Toast("请选择");
        return;
      }
      const { valueKey } = this;
      const [select] = this.columns.filter(
        (item) => item[valueKey] === this.value
      );
      console.log(select);
      this.$emit("confirm", select);
    },
    _onSearch(val) {
      this.pageSize = 1;
      this.$nextTick(() => {
        this.$emit("search", val, this.pageSize, this.status);
      });
    },
    _onLoad() {
      this.pageSize += 1;
      this.$nextTick(() => {
        this.$emit("load", this.keyword, this.pageSize, this.status);
      });
    },
    setValue(val) {
      if (val) {
        this.columns.forEach((item) => {
          if (item.text === val) this.value = item[this.valueKey];
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.date-picker {
  margin: 0 16px;
  @apply flex flex-col overflow-hidden;
  height: calc(100vh / 10 * 7);
  .date-picker_toolbar {
    padding-top: 10px;
    height: calc(50px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);

    @apply flex items-center justify-between;
    .toolbar__cancel,
    .toolbar__confirm {
      flex-grow: 1;
      height: 100%;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      // min-width: 28px;
      font-weight: 500;
      text-align: center;
    }
    .toolbar__confirm {
      color: #1d6fe9;
    }
    .toolbar__cancel {
      color: #666666;
    }
    .toolbar__line {
      width: 1px;
      height: 20px;
      background: #f0f0f0;
    }
    .toolbar__title {
      @apply max-w-1/2 font-500 text-16px leading-20px text-center;
      margin-bottom: 12px;
    }
  }
  .date-picker_body {
    @apply h-full overflow-auto;
    border-radius: 10px;
    margin-top: 16px;
    .img-icon {
      width: 20px;
      height: 20px;
    }
  }
  ::v-deep {
    .date-picker_body {
      background: #f6f6f6;
      border-radius: 10px;
      .van-cell {
        background: #f6f6f6;
        .van-cell__title {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }
      }
      .van-cell::after {
        border: none;
      }
      .text {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
    }
    .date-picker_toolbar {
      border-top: 1px solid #f5f5f5;
      margin-top: 16px;
    }
    .date-picker_search {
      .van-search {
        height: 60px;
        border-bottom: 1px solid #eeeeee;
        .van-search__content {
          background: #fff;
        }
      }
    }
  }
}
</style>
